<!-- 核销员活动列表管理 -->
<template>
  <div class="the-list">
    <div class="panel-search">
      <el-form inline :model="veTable.query" class="demo-form-inline">
        <el-form-item label="活动名称">
          <el-input
            v-model="veTable.query.eventsName"
            placeholder="活动名称"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="veTableFn.onSubmit">搜索</el-button>
          <el-button type="primary" @click="veTableFn.onResetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="panel-table">
      <div class="table-head">
        <span>活动列表</span>
        <div>
          <el-button type="primary" @click="addEditFn.openPanel('add')"
            >添加</el-button
          >
        </div>
      </div>
      <el-table
        :data="veTable.list"
        stripe
        :header-cell-style="{ backgroundColor: '#ededed', padding: '12px 0' }"
        style="width: 100%"
        border
      >
        <el-table-column prop="eventsName" label="活动名称" />
        <el-table-column prop="createdAt" label="添加时间" />
        <el-table-column
          fixed="right"
          label="操作"
          width="480px"
          align="center"
        >
          <template #default="{ row }">
            <el-button
              type="danger"
              size="small"
              plain
              @click="delFn.sureDelete(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <pagination
          :total="veTable.total"
          v-model:page="veTable.query.page"
          v-model:limit="veTable.query.pageSize"
          @pagination="veTableFn.getTableList"
        />
      </div>
    </div>
    <el-dialog
      :title="'新增活动'"
      v-model="addEditData.showPanel"
      width="30%"
      style="height: 60vh"
      center
    >
      <div class="panel-search">
        <el-form inline :model="table.query" class="demo-form-inline">
          <el-form-item label="活动名称">
            <el-input
              v-model="table.query.eventsName"
              placeholder="活动名称"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="tableFn.onSubmit">搜索</el-button>
            <el-button type="primary" @click="tableFn.onResetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="panel-table">
        <el-table
          @selection-change="tableFn.selectChange"
          :data="table.list"
          stripe
          :header-cell-style="{ backgroundColor: '#ededed', padding: '12px 0' }"
          style="width: 100%; height: 40vh; overflow-y: auto"
          border
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="eventsName" label="活动名称" />
        </el-table>
        <div class="table-pagination">
          <pagination
            :total="table.total"
            v-model:page="table.query.page"
            v-model:limit="table.query.pageSize"
            @pagination="tableFn.getTableList"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addEditFn.closePanel()">取 消</el-button>
          <el-button type="primary" @click="addEditFn.submitData()"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script>
import { reactive, watchEffect, ref } from "vue";
import {
  getVerifierTableList,
  getEventsInfoList,
  deleteVerifierEvent,
  addEventsVerifierAuth,
} from "@/api/eventsinfo.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

export default {
  name: "verifierManage",
  components: {},
  setup() {
    const { $data: veTable, $fn: veTableFn } = verifierEventTableModule();
    const { $data: table, $fn: tableFn } = tableModule(veTable);
    const { $data: addEditData, $fn: addEditFn } = addOrEditModule(
      table,
      tableFn,
      veTableFn
    );
    const { $data: delData, $fn: delFn } = deleteModule(veTableFn);
    const router = useRouter();
    watchEffect(() => {
      if (router.currentRoute.value.params.id != veTable.query.verifierId) {
        veTable.query.page = 1;
        veTableFn.getTableList();
      }
    });
    return {
      veTable,
      veTableFn,
      table,
      tableFn,
      addEditData,
      addEditFn,
      delData,
      delFn,
    };
  },
};
// 核销员活动列表功能模块
function verifierEventTableModule() {
  const router = useRouter();
  const params = ref({});
  watchEffect(() => {
    params.value = router.currentRoute.value.params;
  });

  const backup = {
    query: {
      pageSize: 10,
      page: 1,
      verifierId: "",
      name: "",
      account: ""
    },
  };
  const $data = reactive({
    query: { ...backup.query },
    list: [],
    total: 0,
  });

  const $fn = {
    getTableList() {
      $data.query.verifierId = params.value.id;
      getVerifierTableList($data.query).then((res) => {
        if (res.code === 0) {
          $data.list = res.data.items;
          // $data.excludeIds = res.data.otherData;
          $data.total = res.data.pagination.total_record;
        }
      });
    },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.getTableList();
    },
    onSubmit() {
      $data.query.page = 1;
      $fn.getTableList();
    },
  };

  $fn.getTableList();

  return {
    $data,
    $fn,
  };
}

// 列表功能模块
function tableModule(veTable) {
  const router = useRouter();
  const params = ref({});
  watchEffect(() => {
    params.value = router.currentRoute.value.params;
  });
  const backup = {
    query: {
      pageSize: 10,
      page: 1,
      // excludeIds: null,
      name: "",
      account: ""
    },
  };

  const $data = reactive({
    query: { ...backup.query },
    list: [],
    total: 0,
    listSelectId: [],
  });

  const $fn = {
    getTableList() {
      getEventsInfoList({
        ...$data.query,
        exVerifyId: params.value.id
      }).then((res) => {
        if (res.code === 0) {
          $data.list = res.data.items;
          $data.total = res.data.pagination.total_record;
        }
      });
    },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.getTableList();
    },
    onSubmit() {
      $data.query.page = 1;
      $fn.getTableList();
    },
    // 选中添加/不选中删除
    selectChange(selection) {
      $data.listSelectId = selection.map((item) => item.id);
    },
  };

  // $fn.getTableList();

  return {
    $data,
    $fn,
  };
}

// 新增
function addOrEditModule(table, tableFn, veTableFn) {
  const router = useRouter();
  const params = ref({});
  watchEffect(() => {
    params.value = router.currentRoute.value.params;
  });

  const $data = reactive({
    showPanel: false,
    isEdit: false,
    post: {
      id: "",
      eventsId: "",
      eventsCancelPersonId: "",
    }, //提交的数据
  });
  const $fn = {
    openPanel(operate, row) {
      // tableFn.onResetQuery()
      tableFn.getTableList();
      if (operate === "add") {
        $data.isEdit = false;
      }
      $data.showPanel = true;
    },
    closePanel() {
      $data.showPanel = false;
      $data.post = {
        id: "",
        eventsId: "",
        eventsCancelPersonId: "",
      };
    },
    submitData() {
      if (!table.listSelectId || table.listSelectId.length == 0) {
        ElMessage.error("请选择活动！");
        return;
      }
      let addList = [];
      table.listSelectId.forEach((selectId) => {
        addList.push({
          eventsId: selectId,
          eventsCancelPersonId: params.value.id,
        });
      });
      console.log("req data:", addList);

      addEventsVerifierAuth(addList).then((res) => {
        if (res.code === 0) {
          ElMessage.success("添加成功！");
          veTableFn.getTableList();
          $fn.closePanel();
        }
      });
    },
  };

  tableFn.openPanel = $fn.openPanel;
  return {
    $data,
    $fn,
  };
}

// 删除
function deleteModule(veTableFn) {
  const $fn = {
    sureDelete(row) {
      ElMessageBox.confirm("是否确认删除该关联活动？", "确认删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $fn.deleteItem(row);
        })
        .catch(() => {});
    },
    deleteItem(row) {
      // 发起删除
      console.log("发起删除");
      deleteVerifierEvent(row.id).then((res) => {
        if (res.code === 0) {
          ElMessage.success("删除成功！");
          veTableFn.getTableList();
        }
      });
    },
  };
  return {
    $fn,
  };
}
</script>
<style scoped lang="scss">
@import "@/styles/tablePage.scss";
// .the-list {
//   height: 100%;
// }
.el-form-item {
  margin-bottom: 8px;
}
</style>